<!--
 * @Description: 租户管理
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:26:28
 * @LastEditTime: 2021-09-28 10:57:44
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" :label-width="labelWidth" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 租户名称 -->
              <el-form-item :label="$t('user.TenantName')">
                <el-input v-model.trim="filterSearch.label" placeholder="名称"></el-input>
              </el-form-item>
            </el-col>
            <!-- 搜索 重置 -->
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <el-button type="primary" @click="search">{{$t('systerms.Search')}}</el-button>
              <el-button @click="reset">{{$t('systerms.Reset')}}</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <!-- 新增 -->
        <el-button
          size="medium"
          type="primary"
          plain
          @click="showDialog('add')"
          v-power="1"
        >{{$t('user.Add')}}</el-button>
      </div>
    </table-bar>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- ID -->
      <el-table-column
        v-if="columns[0].show"
        align="center"
        width="100"
        label="ID"
        sortable
        prop="id"
      />
      <!-- 租户名称 -->
      <el-table-column
        v-if="columns[1].show"
        align="center"
        width="200"
        :label="$t('user.TenantName')"
        show-overflow-tooltip
        prop="userlabel"
      />
      <!-- 地址 -->
      <el-table-column
        v-if="columns[2].show"
        :label="$t('user.Address')"
        width="200"
        prop="address"
      />
      <!-- 描述 -->
      <el-table-column
        v-if="columns[3].show"
        min-width="150"
        :label="$t('user.Description')"
        show-overflow-tooltip
        prop="description"
      />
      <!-- 操作 -->
      <el-table-column fixed="right" :label="$t('user.Operation')" align="center" width="150px">
        <!-- 编辑  删除-->
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showDialog('edit', scope)"
            v-power="scope.row.id === 100000 ? 0 : 2"
          >{{$t('systerms.Edit')}}</el-button>
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="deleteUser(scope)"
            v-power="scope.row.id === 100000 ? 0 : 2"
          >{{$t('user.Delete')}}</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="dvEdit"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-width="labelWidth"
        label-position="right"
      >
        <!-- 租户名称 编辑 -->
        <el-form-item :label="$t('user.TenantName')" prop="userlabel">
          <el-input
            v-model="form.userlabel"
            :disabled="dialogTitle === '编辑' || dialogTitle === $t('systerms.Edit')"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item :label="$t('user.Address')" prop="address">
          <el-input v-model="form.address" maxlength="200"></el-input>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item :label="$t('user.Description')" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.description"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="dvEdit = false">{{$t('user.Cancel')}}</el-button>
        <el-button type="primary" @click="onSubmit">{{$t('user.Confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dvEdit: false,
      dialogTitle: '',
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      form: {
        userlabel: null,
        address: null,
        description: null
      },
      dataList: [],
      filterSearch: {
        label: null
      },
      columns: [
        { name: 'ID', show: true },
        { name: '租户名称', show: true },
        { name: '地址', show: true },
        { name: '描述', show: true }
      ],
      rules: {
        userlabel: [
          { required: true, message: this.$t('user.InputTenantName'), trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: this.$t('user.InputErrorCnAndEn'), trigger: 'blur' }
        ],
        address: [
          { required: true, message: this.$t('user.PlaceholderByAddr'), trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: this.$t('user.InputErrorNunberCnAndEn'), trigger: 'blur' }
        ]
      }
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 80;
      if (currentLang === 'cn') {
        temp = 80;
      } else {
        temp = 120;
      }
      return temp + 'px';
    }
  },
  methods: {
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        label: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        label: _this.filterSearch.label,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/tenant/getMultiDg',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { count, objects } = resultBody;
          _this.page.total = count;
          _this.dataList = objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    showDialog (type, data) {
      let _this = this;
      _this.dvEdit = true;
      _this.dialogTitle = type === 'add' ? this.$t('user.Add') : this.$t('systerms.Edit');
      _this.$nextTick(() => {
        _this.$refs['ruleForm'].clearValidate();
      });
      if (type === 'add') {
        _this.form = {
          userlabel: null,
          address: null,
          description: null
        };
      } else {
        _this.form = {
          id: data.row.id,
          userlabel: data.row.userlabel,
          address: data.row.address,
          description: data.row.description
        };
      }
    },
    onSubmit () {
      let _this = this;
      let params = {
        userlabel: _this.form.userlabel,
        address: _this.form.address,
        description: _this.form.description
      };
      _this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (_this.dialogTitle === '新增' || _this.dialogTitle === this.$t('user.Add')) {
            _this.$http.post({
              url: '/api/gateway/domaingroups',
              data: params
            }).then(res => {
              _this.$message.success(this.$t('user.AddSuccess'));
              _this.dvEdit = false;
              _this.refresh();
            });
          } else {
            _this.$http.put({
              url: '/api/gateway/domaingroups/' + _this.form.id,
              data: params
            }).then(res => {
              _this.$message.success(this.$t('user.UpdatedSuccessful'));
              _this.dvEdit = false;
              _this.refresh();
            });
          }
        } else {
          _this.$message.error(this.$t('systerms.CheckRequired'));
          return false;
        }
      });
    },
    deleteUser (scope) {
      let _this = this;
      // 获取当前登录用户
      let loginUser = _this.$store.state.user.user.info;
      // 判断登入用户
      if (loginUser.dgId !== scope.row.id) {
        this.$confirm(this.$t('user.DeleteTips'), this.$t('user.Tips'), {
          confirmButtonText: this.$t('user.Confirm'),
          cancelButtonText: this.$t('user.Cancel'),
          type: 'error'
        }).then(() => {
          _this.$http.deleted({
            url: '/api/gateway/domaingroups/' + scope.row.id
          }).then(res => {
            _this.$message.success(this.$t('user.DeletionSuccess'));
            _this.refresh();
          });
        }).catch(() => {
          _this.$message.info(this.$t('user.CancelDelete'));
        });
      } else {
        _this.$message.warning('无法删除登入租户！');
      }
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
  }

  ::v-deep .el-dialog__body {
    padding-bottom: 0;
  }
}
</style>